<template>
  <div class="easy-container-min p-x-16 border-bottom bg-fafafa flex align-items-center">
    <el-checkbox v-model="isGood">精品</el-checkbox>
    <el-select
      v-model="selectedTags"
      placeholder="按标签筛选"
      size="small"
      multiple
      filterable
      remote
      arrow
      reserve-keyword
      value-key="title"
      :remote-method="searchTags"
      :loading="loading"
      @visible-change="openTagsFilter"
      class="m-l-16"
      style="max-width: 10rem;"
    >
      <el-option v-for="tag in tags" :key="tag.title" :value="tag.title" />
    </el-select>
  </div>
</template>

<script>
import DividerNav from '@/components/shared/divider_nav';

export default {
  name: 'list-filter',
  components: {
    DividerNav,
  },
  data() {
    return {
      isGood: this.$route.query.good === 'true',
      selectedTags: [],
      tags: [],
      loading: false,
    };
  },
  methods: {
    openTagsFilter(open) {
      if (!open || this.tags.length) return;
      this.searchTags();
    },
    searchTags(search) {
      this.loading = true;
      this.$api.spaces.tags({
        spaceId: this.$route.params.spaceId,
        type: 'ProductFile',
        search,
      }).then((res) => {
        if (search) this.tags = [];
        this.tags = this.tags.concat(res.data);
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
  watch: {
    isGood(val) {
      const newQuery = Object.assign({}, this.$route.query, {
        good: val || undefined,
        page: undefined,
      });
      this.$router.push({ path: this.$route.path, query: newQuery });
    },
    selectedTags(val) {
      const newQuery = Object.assign({}, this.$route.query, { page: undefined, tags: val });
      this.$router.push({ path: this.$route.path, query: newQuery });
    },
  },
};
</script>

<style></style>
